<template>
  <div id="PieChart">
    <div ref="chart01"
         class="chart01"></div>
  </div>
</template>

<script>
export default {
  name: 'Category',
  props: {
    Etitle: String,
    PieData: Array | Object,
  },
  components: {},
  data() {
    return {
      colorList: [
        '#f3ac62',
        '#f89448',
        '#f18b6a',
        '#f06c44',
        '#fd9254',
        '#f3ac62',
        '#f89448',
        '#f18b6a',
        '#f06c44',
        '#fd9254',
      ],
    }
  },
  computed: {},
  watch: {
    PieData: function (newVal, oldVal) {
      this.drawChart01()
    },
  },
  created() {},
  mounted() {
    this.drawChart01()
  },

  methods: {
    // 绘制图表
    drawChart01() {
      let that = this
      let myChart1 = that.$echarts.init(that.$refs.chart01)
      let option = {
        color: that.colorList,
        // 鼠标提示功能
        // tooltip: {
        //   trigger: 'item',
        //   formatter: '{b} :{d}%',
        //   confine: true, //将此限制打开后tooltip将不再溢出
        // },
        legend: {
          //   data: [
          //     "商品总数",
          //     "动销商品数",
          //     "抖音浏览总量",
          //     "动销商品浏览量",
          //     "抖音订单量",
          //   ],
          icon: 'circle',
          bottom: -5,
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 30,
          textStyle: {
            color: '#555',
          },
        },
        // title: {
        //     text: this.Etitle,
        //     left: 'center',
        //     // top: 10,
        //     textStyle: {
        //         color: '#555',
        //     }
        // },
        // tooltip: {
        //   trigger: "item",
        //     formatter: function(params){
        //         // console.log(params)
        //         return params.seriesName + '</br>' + params.name+ ' ' + ':' + ' ' + params.value + '%'
        //     }
        // },
        series: [
          {
            name: this.Etitle,
            type: 'pie',
            // radius: [30, 110],
            radius: ['33%', '55%'],
            center: ['50%', '50%'],
            // roseType: 'area',
            data: that.PieData,
            // .sort((a,b)=>{
            //     return a.value - b.value
            // })
            label: {
              //   position: "center",
              formatter: ' {b|{b}}: {c}%',
              borderColor: '#aaa',
              avoidLabelOverlap: true,
              rich: {
                b: {
                  fontSize: 12,
                  lineHeight: 33,
                  color: '#555',
                },
                d: {
                  color: '#555',
                },
              },
            },
            data: that.PieData,
          },
        ],
      }
      myChart1.setOption(option)
      /*窗口自适应，关键代码*/
      setTimeout(function () {
        window.addEventListener('resize', function () {
          myChart1.resize()
        })
      }, 200)
    },
  },
}
</script>
<style lang='less' scoped>
#PieChart {
  width: 100%;
  height: 100%;
  // margin-top: 30px;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
}
</style>
